<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>用户活动中心</title>
        <base href="${pageContext.request.contextPath}/">
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/style.css"/>

    </head>
    <body style="background-color: #f7f7f7; ">

        <div class="header-most-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-8 col-sm-8 col-12">
                        <div class="main-flex-top">
                            <div class="email sel d-flex">
                                <div style="margin-right: 10px;" class="main-email-text d-flex">
                                    <i class="glyphicon glyphicon-home"></i>
                                    <a style="font-size: 14px; color: #e9dbf0;font-weight: 500;" class="nav-link active" href="success_index">首页</a>
                                </div>
                                <div class="main-loc-text d-flex">
                                    <i class="glyphicon glyphicon-tags"></i>
                                    <a style="font-size: 14px; color: #e9dbf0;font-weight: 500;" class="nav-link active" href="l/lindex?id=${loginUser.uname}">旅游日记</a>
                                    <a style="font-size: 14px; color: #e9dbf0;font-weight: 500;" class="nav-link active" href="l/aindex?id=${loginUser.uid}">旅游活动</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-4 col-sm-4 col-12">
                        <div class="login-area">
                            <div class="seclict-area">
                                <i class="glyphicon glyphicon-home" style="color: #e9dbf0;"></i>
                                <select name="cars">
                                    <option value="volvo">CN</option>
                                    <option value="saab">US</option>
                                    <option value="fiat">GE</option>
                                    <option value="audi">FRANCH</option>
                                </select>
                            </div>
                            <div class="user-log">
                                <i class="glyphicon glyphicon-user"></i>
                                <a href="toUserActivity?id=${loginUser.uid}">${loginUser.uname}&nbsp;活动中心&nbsp;|</a>
                                <a href="logdetail/ulog?id=${loginUser.uid}">日志中心&nbsp;|</a>
                                <a href="users/logout">退出登录</a>
                                <img src="${loginUser.uhead}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="user-background">
            <img style="height: 400px; width: 100%" src="img/325001.jpg" alt="">
        </div>               

        <!--导航栏-->
        <header id="top-heder-nav">
            <nav class="navbar navbar-expand-lg" data-toggle="sticky-onscroll">
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul style="margin-left: 500px;" class="navbar-nav">
                        <li class="nav-item"><a class="nav-link active" href="toUserActivity?id=${loginUser.uid}">我的窝</a></li>
                        <li class="nav-item"><a class="nav-link active" href="toUserActivity?id=${loginUser.uid}">我的发布</a></li>
                        <li class="nav-item"><a class="nav-link active" href="toUserActivity?id=${loginUser.uid}">我参与的</a></li>
                        <li class="nav-item"><a class="nav-link active" href="logdetail/ulog?uname=${loginUser.uname}">日志中心</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <!--我的发布及我的参与-->        
        <div style="width: 1000px;" class="container content-box">
            <div class="user-area">
                <img src="${loginUser.uhead}">
                <br>
                <br>
                <font style="font-family: 幼圆;font-size: 16px;"><b>${loginUser.uname}</b>&nbsp;&nbsp;<span style="color: #ff9d33;">${loginUser.ugender}</span></font>
                <p style="font-size: 14px;">等级：<b><span style="color: #ff9d33;">lv.${loginUser.urank}</span></b></p>
                <p style="color: #000; font-size: 12px;">来自慢时光游记</p>
            </div> 
            <div class="user-right">
                <div class="activity-area1">
                    <br>
                    <p>我的发布</p>
                    <a href="userActivity/toAddActivity" class="btn" id="aaaa"><i class="glyphicon glyphicon-pencil"></i>发布活动</a>
                    <div class="activities">
                        <table class="table table-hover">
                            <tr>
                                <th>计划名称</th>
                                <th>结伴人数</th>
                                <th>出发时间</th>
                                <th>报名截止时间</th>
                                <th>操作</th>
                            </tr>
                            <c:forEach items="${userActivities}" var="list">
                                <tr>
                                    <td>${list.atheme}</td>
                                    <td>${list.anumber}</td>
                                    <td>${list.abegintime}</td>
                                    <td>${list.aentryddl}</td>
                                    <td>
                                        <a href="javascript:getJoint('${list.aid}')">查看已报名的人数/</a>
                                        <a href="activity/findActivity?id=${list.aid}">活动详情</a>
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>
                    </div>
                </div>
                <div class="activity-area2">
                    <br>
                    <p>我参与的</p>
                    <div class="activities">
                        <table class="table table-hover">
                            <tr>
                                <th>计划名称</th>
                                <th>结伴人数</th>
                                <th>出发时间</th>
                                <th>报名截止时间</th>
                                <th>操作</th>
                            </tr>
                            <c:forEach items="${jionActivities}" var="list">
                                <tr>
                                    <td>${list.atheme}</td>
                                    <td>${list.anumber}</td>
                                    <td>${list.abegintime}</td>
                                    <td>${list.aentryddl}</td>
                                    <td>
                                        <a href="activity/findActivity?id=${list.aid}">活动详情/</a>
                                        <a href="javascript:deleteOne('${list.aid}')">取消报名</a>
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!--     Modal 报名活动者-->
        <div class="modal fade" id="jointModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h2 class="modal-title text-danger" id="addModalLabel">已报名用户</h2>
                    </div>
                    <div class="modal-body">
                        <table id="jointTable" class="table table-hover">
                            <tr>
                                <th>昵称</th>
                                <th>性别</th>
                                <th>操作</th>
                            </tr>
                        </table>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!--     Modal 取消报名-->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h2 class="modal-title text-danger" id="addModalLabel">取消报名</h2>
                    </div>
                    <div class="modal-body">
                        <form id="deleteForm" class="form-inline" method="post">
                            <span>昵称：</span>
                            <input type="text" id="uname" class="form-control" value="${loginUser.uname}" readonly>
                            <input type="hidden"id="uid" class="form-control" value="${loginUser.uid}" >
                            <br><br>
                            <span>取消原因：</span>
                            <textarea id="reason"  class="form-control" placeholder="请在此输入"></textarea>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="delete" type="button" class="btn btn-default" data-dismiss="modal">确定取消</button>
                    </div>
                </div>
            </div>
        </div>

        <!--尾部-->
        <div class="footre-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-8 col-sm-8 col-8">
                        <div class="copy-right-para">
                            <p>版权所有 &copy; 2019.张彦 陈新 毕爱卿 付丽瑶</p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-4 col-sm-4 col-4">
                        <div class="copy-right-icon">
                            <a href="#"><i class="glyphicon glyphicon-thumbs-up face no-ag"></i></a>
                            <a href="#"><i class="glyphicon glyphicon-gift face"></i></a>
                            <a href="#"><i class="glyphicon glyphicon-heart-empty face"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>

        var aid;

        function getJoint(id) {
            var aid = id;
            $.ajax({
                url: 'userActivity/getUsers',
                type: 'POST',
                data: {aid: aid},
                success: function (list) {

                    $("#jointTable .datarow").remove();
                    $.each(list, function (index, user) {
                        var str = "<tr class=\"datarow\">"
                                + "<td>" + user.uname + "</td>"
                                + "<td>" + user.ugender + "</td>"
                                + "<td>无</td>"
                                + "</tr>";

                        $("#jointTable").append(str);
                    });

                    $('#jointModal').modal('show');
                },
                error: function (req, status, error) {
                    alert("Ajax请求处理失败，错误：" + error);
                }
            });
        }
        function deleteOne(id) {
            aid = id;
            alert("是否确定取消报名？");
            $('#deleteModal').modal('show');
        }

        $(document).ready(function () {

            $("#delete").click(function () {

//                 alert(aid+$("#uid").val());

                $.ajax({
                    url: 'userActivity/deleteJoin',
                    type: 'POST',
                    data: {aid: aid, uid: $("#uid").val()},
                    success: function () {
                        alert("成功取消报名！");
                        
                    },
                    error: function (req, status, error) {
                        alert("Ajax请求处理失败，错误：" + error);
                    }
                });
            });
            
            

        });

    </script>


</html>
